<template>
  <div :class="{ hideUpload: limit == uploadFileList.length }">
    <el-upload
      ref="upload"
      v-loading="uploading"
      action=""
      :list-type="listType"
      :limit="limit"
      :file-list="uploadFileList"
      :disabled="disable"
      :http-request="params => handleFile(params)"
      :on-remove="handleRemove"
      :accept="accept"
    >
    
      <slot name="icon">
        <i slot="default" class="el-icon-plus"></i>
      </slot>
    </el-upload>
  </div>
</template>

<script>
import DocumentApi from "@/api/document";
import baseURL from "@/api/baseURL";
export default {
  components: {},
  props: {
    urlList: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    limit: {
      type: [String, Number],
      default: null
    },
    accept: {
      type: String,
      default: ".png,.jpg,.jpeg"
    },
    listType: {
      type: String,
      default: "picture-card"
    },
    moduleType: {
      type: String,
      default: "AGRICULTURAL_PLATFORM"
    },
  },
  data() {
    return {
      uploadFileList: [],
      disable: false,
      uploading: false
    };
  },
  watch: {
    urlList(val) {
      this.uploadFileList = val;
    },
    disabled(val) {
      this.disable = val;
    }
  },
  mounted() {
    this.uploadFileList = this.urlList;
    this.disable = this.disabled;
  },
  methods: {
    handleRemove(file) {
      var index = this.uploadFileList.findIndex(a => a.name === file.name);
      if (index !== -1) {
        this.uploadFileList.splice(index, 1);
        this.getFile();
      }
    },
    // 上传文件
    handleFile(files) {
      if(this.uploadFileList.length==this.limit){
        this.$message.warning(`最多上传${this.limit}张图片`)
        return
      }
      let { file } = files;
      let formData = new FormData();
      formData.append("file", file);
      formData.append("upDownType", "FTP");
      formData.append("moduleType", this.moduleType);
      this.uploading = false;
      DocumentApi.getUploadUrl(formData).then(res => {
        let filePath = res.data;
        let url = baseURL.webUrl + filePath;
        this.uploadFileList.push({ url, name: url });
        this.getFile();
        this.$message.success("上传成功！");
        // if(res.code==1){
        //   let filePath = res.data;
        //   let url = baseURL.webUrl + filePath;
        //   this.uploadFileList.push({ url, name: url });
        //   this.getFile();
        //   this.$message.success("上传成功！");
        // }else{
        //   this.uploadFileList = this.uploadFileList;
        //   this.$message.error(res.msg||"上传失败！");
        // }
      }).catch(() => {
        this.$message.error("上传失败！");
      });
    },
    getFile() {
      this.$emit("getFile", this.uploadFileList);
    },
    clearFile() {
      this.$refs.upload && this.$refs.upload.clearFiles();
    }
  }
};
</script>

<style lang="scss" scoped>
.hideUpload {
  ::v-deep .el-upload{
    display: none;
  }
}
::v-deep .el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  line-height: 146px;
  vertical-align: top;
}
</style>
